<template>
	<!-- #ifdef H5 -->
	<td
		class="uni-table-td"
		:rowspan="rowspan"
		:colspan="colspan"
		:class="{ 'table--border': border }"
		:style="{ width: width + 'px', height: height + 'px', 'text-align': align }"
	>
		<slot></slot>
	</td>
	<!-- #endif -->
	<!-- #ifndef H5 -->
	<!-- :class="{'table--border':border}"  -->
	<view class="uni-table-td" :class="{ 'table--border': border }" :style="{ width: width + 'px', height: height + 'px', 'text-align': align }"><slot></slot></view>
	<!-- #endif -->
</template>

<script>
/**
 * Td 单元格
 * @description 表格中的标准单元格组件
 * @tutorial https://ext.dcloud.net.cn/plugin?id=3270
 * @property {Number} 	align = [left|center|right]	单元格对齐方式
 */
export default {
	name: 'uniTd',
	options: {
		virtualHost: true
	},
	props: {
		width: {
			type: [String, Number],
			default: ''
		},
		height: {
			type: [String, Number],
			default: ''
		},
		align: {
			type: String,
			default: 'left'
		},
		rowspan: {
			type: [Number, String],
			default: 1
		},
		colspan: {
			type: [Number, String],
			default: 1
		}
	},
	data() {
		return {
			border: false
		};
	},
	created() {
		this.root = this.getTable();
		this.border = this.root.border;
	},
	methods: {
		/**
		 * 获取父元素实例
		 */
		getTable() {
			let parent = this.$parent;
			let parentName = parent.$options.name;
			while (parentName !== 'uniTable') {
				parent = parent.$parent;
				if (!parent) return false;
				parentName = parent.$options.name;
			}
			return parent;
		}
	}
};
</script>

<style lang="scss">
$border-color: #ebeef5;

.uni-table-td {
	display: table-cell;
	padding: 8px 10px;
	font-size: 14px;
	border-bottom: 1px $border-color solid;
	font-weight: 400;
	color: #606266;
	line-height: 23px;
	box-sizing: border-box;
}

.table--border {
	border-right: 1px $border-color solid;
}
</style>
